import React from 'react'
import PropTypes from 'prop-types'
import { routerRedux } from 'dva/router'
import { connect } from 'dva'
import { Row, Col, Button, Popconfirm, Icon } from 'antd'
import { List, Page } from 'components'
import queryString from 'query-string'
import Filter from './Filter'
import Modal from './Modal'
import style from './hr.less'
import { ListMenuType } from 'utils/enums'


const Exchangerate = ({ location, dispatch, exchangerate, loading }) => {
  location.query = queryString.parse(location.search)
  const { list, pagination, currentItem, modalVisible, modalType, selectedRowKeys, currenciesTypeData } = exchangerate
  const { pageSize } = pagination
  // 弹出框属性, ceate可创建一个弹出框, 如果细节多就是跳转路由然后进入detail/new, 少就是一个弹出框
  const modalProps = {
    item: currentItem || {},
    visible: modalVisible,
    maskClosable: false,
    width: 700,
    currenciesData: currenciesTypeData,
    confirmLoading: loading.effects['exchangerate/update'],
    title: `${modalType}`, // 弹出框标题
    wrapClassName: 'vertical-center-modal',
    onOk (data) {
      dispatch({
        type: `exchangerate/${modalType}`,
        payload: data,
      })
    },
    onCancel () {
      dispatch({
        type: 'exchangerate/hideModal',
      })
    },
  }
  // 列表属性
  const listProps = {
    dataSource: list,
    menuType: ListMenuType.MENU_UPDATE + ListMenuType.MENU_DELETE,
    loading: loading.effects['exchangerate/list'], // 进入路由就要请求一个list
    pagination,
    location,
    columnsData: [
      {
        title: 'Index',
        key: 'index',
        render: (text, record, index) => {
          return (
            <span>{index + 1}</span>
          )
        },
      },
      {
        title: 'Update time',
        key: 'update time',
        render: (text, record) => {
          return (
            <span>
              {record.updateTime1}
            </span>
          )
        },
      },
      {
        title: 'Currency Code',
        key: 'currencyCode',
        render: (text, record) => (
          <span >
            {record.currencyCodeFrom} <Icon type="swap-right" /> {record.currencyCodeTo}
          </span>
        ),
      },
      {
        title: 'Buy T/T',
        key: 'buyingBankRate',
        render: (text, record) => (
          <span >
            {record.buyingBankRate1}
          </span>
        ),
      },
      {
        title: 'Buy Cash',
        key: 'buyingRate',
        render: (text, record) => (
          <span >
            {record.buyingRate1}
          </span>
        ),
      },
      {
        title: 'Sell T/T',
        key: 'sellingBankRate',
        render: (text, record) => (
          <span >
            {record.sellingBankRate1}
          </span>
        ),
      },
      {
        title: 'Sell Cash',
        key: 'sellingRate',
        render: (text, record) => (
          <span >
            {record.sellingRate1}
          </span>
        ),
      },
      {
        title: 'Exchange Rate',
        key: 'exchangeRate',
        render: (text, record) => (
          <span >
            {record.exchangeRate1}
          </span>
        ),
      },
    ],
    onChange (page) {
      const { query, pathname } = location
      dispatch(routerRedux.push({
        pathname,
        search: queryString.stringify({
          ...query,
          page: page.current,
          pageSize: page.pageSize,
        }),
      }))
    },
    onDeleteItem (id) {
      dispatch({
        type: 'exchangerate/delete',
        payload: id,
      })
    },
    onEditItem (item) {
      dispatch({
        type: 'exchangerate/showModal',
        payload: {
          modalType: 'update',
          currentItem: item,
        },
      })
    },
  }
  const filterProps = {
    filter: {
      ...location.query,
    },
    currenciesData: currenciesTypeData,
    onFilterChange (value) {
      dispatch(routerRedux.push({
        pathname: location.pathname,
        search: queryString.stringify({
          ...value,
          page: 1,
          pageSize,
        }),
      }))
    },
    onSearch (fieldsValue) {
      fieldsValue.keyword.length ? dispatch(routerRedux.push({
        pathname: '/exchangerate',
        query: {
          field: fieldsValue.field,
          keyword: fieldsValue.keyword,
        },
      })) : dispatch(routerRedux.push({
        pathname: '/exchangerate',
      }))
    },
    onAdd () {
      dispatch({
        type: 'exchangerate/updateModalState', // 将modal打开, 并将新的数据(为空)注入modal
        payload: {
          modalType: 'create',
          currentItem: {},
        },
      })
    },
  }
  // 多选删除
  const handleDeleteItems = () => {
    dispatch({
      type: 'exchangerate/multiDelete',
      payload: {
        ids: selectedRowKeys,
      },
    })
  }
  return (
    <Page inner>
      <Filter {...filterProps} />
      <List {...listProps} />
      {modalVisible && <Modal {...modalProps} /> }
    </Page>
  )
}
Exchangerate.propTypes = {
  exchangerate: PropTypes.object,
  location: PropTypes.object,
  dispatch: PropTypes.func,
  loading: PropTypes.object,
}

export default connect(({ exchangerate, loading }) => ({ exchangerate, loading }))(Exchangerate)
